<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>娱乐新闻</title>
    <link rel="stylesheet" href="/libs/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <style>
        /* 评论的样式设置 */
        
        .article .content li {
            border-top: 1px dashed #999;
        }
        
        .article .content li p:first-child {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #ccc;
        }
    </style>
    <!-- 引入js类库 -->
    <script src="/libs/js/moment.js"></script>
    <script src="/libs/js/jquery.js"></script>
    <script src="/libs/js/axios.js"></script>
    <script src="/libs/js/myaxios.js"></script>
    <script src="/libs/js/art-template.js"></script>
    <script src="/libs/layui/layui.js"></script>
</head>

<body>
    <div class="header"> </div>
    <script>
        $('.header').load('common_header.html')
    </script>
    <div class="blank20"></div>
    <div class="article section">
        <script type="text/html" id="articleTpl">

            <h3>{{article.title}}</h3>
            <p align="right">访问量为:
                <span style="color: red;margin-right: 10px;">{{article.view_nums}}</span>发布时间:<span>{{article.add_time|formatDate}}</span>
            </p>
            {{@ article.content}}
            <p align="right">编辑: <span>{{article.author}}</span></p>
        </script>
    </div>

    <div class="article comment">
        <div class="fb">
            <!-- 隐藏域携带要评论新闻去评论 -->
            <!-- <input type="hidden" name="id" value="35"> -->
            <textarea name="content" id="content" cols="30" rows="10"></textarea>
            <button id="btn-comment">发表评论</button>
        </div>
        <h6>精彩评论:</h6>
        <div id="comment" class="content">
            <ul>
                <script type="text/html" id="commentTpl">
                    {{each comments v}}
                    <li>
                        <p><span>评论人:{{v.User.username}}</span><span>评论时间:{{v.add_time|formatDate}}</span>
                        </p>
                        <p>
                            {{v.content}}
                        </p>
                    </li>
                    {{/each}}
                </script>
            </ul>

        </div>
    </div>

    <div class="blank20"></div>

    <div id="footer">
        <p>版权所有&copy;上海快简教育<br/>联系方式：18665455185</p>
    </div>

</body>

</html>
<!-- 引入自己的js -->
<script src="/js/article.js"></script>
<script>
    // 3.实现评论功能
    $(document).on('click', '#btn-comment', function() {
        // 先判断有没有登录，如果有登录，直接发表评论，如果没有登录，弹出登录遮罩层
        let token = localStorage.getItem('token')
        if (!token) {
            $('.login').click()
        } else {
            // 已经登录了，发送网络请求去获取数据
            axios({
                method: 'POST',
                url: 'my/comments/' + id,
                data: {
                    content: $('#content').val().trim()
                },
                headers: {
                    Authorization: token
                }
            }).then(res => {
                const data = res
                    //  创建li,追加到ul的最前面
                $('#comment ul').prepend(` <li>
                        <p><span>评论人:${data.username}</span><span>评论时间:${data.add_time}</span>
                        </p>
                        <p>
                            ${data.content}
                        </p>
                    </li>`)

                // 清空输入框
                $('#content').val('')
            })

        }
    })
</script>
</script>